<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" th:href="@{/css/pintuer.css}">
    <link rel="stylesheet" th:href="@{/css/admin.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <style>
        .layui-panel{
            background-color: #f3f5f7;
        }

    </style>
</head>
<body>
<div class="panel admin-panel">
    <div class="panel-head"><strong class="icon-reorder"> 用户数据分析</strong></div>
    <div class="padding border-bottom" align="center ">
        <div class="layui-row layui-col-space15 ">
            <div class="layui-col-md12" >
                <div class="layui-panel">
                    <div id="china" style="height: 400px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space15 ">
            <div class="layui-col-md4" >
                <div class="layui-panel">
                    <div id="sex" style="height: 400px;"></div>
                </div>
            </div>
            <div class="layui-col-md4" >
                <div class="layui-panel">
                    <div id="birth" style=" height: 400px;"></div>
                </div>
            </div>
            <div class="layui-col-md4" >
                <div class="layui-panel">
                    <div id="grade" style=" height: 400px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space15 ">
            <div class="layui-col-md12" >
                <div class="layui-panel">
                    <div id="user" style="height: 400px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script th:src="@{/js/echarts.min.js}"></script>
<script th:src="@{/js/china.js}"></script>
<script th:src="@{/js/jquery-2.1.0.js}"></script>
<script th:src="@{/js/pintuer.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script th:inline="javascript">
    $(function () {
        var myChartChina = echarts.init(document.getElementById('china'));
        var myChartSex = echarts.init(document.getElementById('sex'));
        var myChartBirth = echarts.init(document.getElementById('birth'));
        var myChartGrade = echarts.init(document.getElementById('grade'));
        var myChartUser = echarts.init(document.getElementById('user'));
        var optionChina;
        var optionSex;
        var optionBirth;
        var optionGrade;
        var optionUser;
        $.ajax({
            type:'post',
            url:'/chart/userList',
            dataType: "json",
            async: false,
            success:function (data) {
                console.log(data);
                optionChina = {
                    title: {  //标题样式
                        text: '各省用户占比',
                        x: "center",
                        textStyle: {
                            fontSize: 18,
                            color: "red"
                        },
                    },
                    tooltip: {  //这里设置提示框
                        trigger: 'item',  //数据项图形触发
                        backgroundColor: "red",  //提示框浮层的背景颜色。
                        //字符串模板(地图): {a}（系列名称），{b}（区域名称），{c}（合并数值）,{d}（无）
                        formatter: '地区：{b}<br/>模拟数据：{c}'
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    visualMap: {//视觉映射组件
                        top: 'center',
                        left: 'left',
                        min: 0,
                        max: data.max,
                        text: ['High', 'Low'],
                        realtime: false,  //拖拽时，是否实时更新
                        calculable: true,  //是否显示拖拽用的手柄
                        inRange: {
                            color: ['lightskyblue', 'yellow', 'orangered']
                        }
                    },
                    series: [
                        {
                            name: '模拟数据',
                            type: 'map',
                            mapType: 'china',
                            roam: false,//是否开启鼠标缩放和平移漫游
                            itemStyle: {//地图区域的多边形 图形样式
                                normal: {//是图形在默认状态下的样式
                                    label: {
                                        show: true,//是否显示标签
                                        textStyle: {
                                            color: "black"
                                        }
                                    }
                                },
                                zoom: 1.5,  //地图缩放比例,默认为1
                                emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                                    label: { show: true }
                                }
                            },
                            top: "3%",//组件距离容器的距离
                            data:data.chinaList
                           /* data: [
                                { name: '北京', value: "350000" },
                                { name: '天津', value: 120000 },
                                { name: '上海', value: 300000 },
                                { name: '重庆', value: 92000 },
                                { name: '河北', value: 25000 },
                                { name: '河南', value: 20000 },
                                { name: '云南', value: 500 },
                                { name: '辽宁', value: 3050 },
                                { name: '黑龙江', value: 80000 },
                                { name: '湖南', value: 2000 },
                                { name: '安徽', value: 24580 },
                                { name: '山东', value: 40629 },
                                { name: '新疆', value: 36981 },
                                { name: '江苏', value: 13569 },
                                { name: '浙江', value: 24956 },
                                { name: '江西', value: 15194 },
                                { name: '湖北', value: 41398 },
                                { name: '广西', value: 41150 },
                                { name: '甘肃', value: 17630 },
                                { name: '山西', value: 27370 },
                                { name: '内蒙古', value: 27370 },
                                { name: '陕西', value: 97208 },
                                { name: '吉林', value: 88290 },
                                { name: '福建', value: 19978 },
                                { name: '贵州', value: 94485 },
                                { name: '广东', value: 89426 },
                                { name: '青海', value: 35484 },
                                { name: '西藏', value: 97413 },
                                { name: '四川', value: 54161 },
                                { name: '宁夏', value: 56515 },
                                { name: '海南', value: 54871 },
                                { name: '台湾', value: 48544 },
                                { name: '香港', value: 49474 },
                                { name: '澳门', value: 34594 }
                            ]*/

                        }
                    ]
                };
                optionSex = {
                    title: {
                        text: '用户男女比例',
                        subtext: '(未进行实名，数据仅供参考)',
                        /*  subtext: 'Ratio of male to female users (real name not carried out, data for reference only)',*/
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: '性别占比',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '40',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data:data.sexList,
                            /*data: [
                                { value: 1048, name: '男' },
                                { value: 735, name: '女' },
                            ],*/
                        }
                    ]
                };
                optionBirth = {
                    title: {
                        text: '用户年龄占比',
                        subtext: '(未进行实名，数据仅供参考)',
                        /*  subtext: 'Age ratio of users (real name not carried out, data for reference only)',*/
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: '年龄占比',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '40',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data:data.ageList,
                      /*      data: [
                                { value: 1048, name: '0-10' },
                                { value: 735, name: '11-20' },
                                { value: 1048, name: '21-30' },
                                { value: 735, name: '31-40' },
                                { value: 1048, name: '41-50' },
                                { value: 735, name: '50以上' },
                            ],*/
                        }
                    ]
                };
                optionGrade = {
                    title: {
                        text: '用户博客等级占比',
                        subtext: '(未进行实名，数据仅供参考)',
                        /*  subtext: 'Percentage of user blog grade (real name not carried out, data for reference only)',*/
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: '等级占比',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '40',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data:data.gradeList,
                            /*data: [
                                { value: 1048, name: '1L' },
                                { value: 735, name: '2L' },
                                { value: 1048, name: '3L' },
                                { value: 735, name: '4L' },
                                { value: 1048, name: '5L' },
                                { value: 735, name: '6L' },
                                { value: 1048, name: '7L' },
                                { value: 735, name: '8L' },
                                { value: 1048, name: '9L' },
                                { value: 735, name: '10L' },
                                { value: 1048, name: '11L' },
                                { value: 735, name: '12L' },
                                { value: 1048, name: '13L' },
                                { value: 735, name: '14L' },
                                { value: 1048, name: '15L' }

                            ],*/
                        }
                    ]
                };
                optionUser = {
                    title: {
                        text: '用户增长曲线'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['注册量']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: data.day
                            /*data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']*/
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '注册量',
                            type: 'line',
                            stack: 'Total',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: data.usersNum
                            /*data: [120, 132, 101, 134, 90, 230, 210]*/
                        }
                    ]
                };
            }
        });
        myChartUser.setOption(optionUser);
        myChartSex.setOption(optionSex);
        myChartBirth.setOption(optionBirth);
        myChartGrade.setOption(optionGrade);
        myChartChina.setOption(optionChina);
    })

</script>
</html>